<template>
  <el-card class="box-card header-dark card-dark">
    <div slot="header" class="clearfix f-medium">
      <i class="fa fa-ship m-r-10 text-c-green" aria-hidden="true"></i>
      <span>无人船状态</span>
      <DropDown class="f-r" @command="toChangeState" trigger="click" :items="dropDownConfig">
        <template slot="title">
          <el-button class="b-r-5 p-x-10 p-y-5 bg-none" size="mini" type="success" plain>{{ shipState
          }}<i class="fa fa-caret-down m-l-5" aria-hidden="true"></i></el-button>
        </template>
      </DropDown>
    </div>
    <!-- 涉及开关的3个按钮 -->
    <div class="flex-row-around">
      <el-button icon="el-icon-share" circle type="primary" @click="toLinkShip" :disabled="linkbtn"></el-button>
      <el-button type="success" round plain :disabled="!linkbtn" @click="toGetPositions" class="openGpsBtn">
        <i class="fa fa-map-marker m-r-5" aria-hidden="true"></i>开启定位
      </el-button>
      <el-button icon="el-icon-switch-button" circle type="danger" :disabled="!linkbtn" @click="toBreakLinkShip">
      </el-button>
    </div>
    <!-- 表示状态的装饰图标 -->
    <em class="statusIcon">
      <i :class="statusIcon" aria-hidden="true"></i>
    </em>
    <!-- 同步的数值 -->
    <el-row :gutter="20" class="text-center p-y-10">
      <el-col :span="24" class="p-y-20">
        <span class="text-c-green f-Elarge">{{ shipState }}</span>
      </el-col>
      <el-col v-for="(item, index) in stateData" :key="index" :span="8" class="p-y-10">
        <div><i :class="['fa', 'text-c-blue m-r-5', item.icon]" aria-hidden="true"></i>{{ item.label }}</div>
        <hr />
        <div class="text-c-green" style="width: 100%;">{{ item.value }} {{ item.unit }}</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { mapState } from "vuex";
import {
  linkShip,
  breakLinkShip,
  getAboveWater,
  getUnderWater,
  getAngle,
} from "@/api/cruiseMange.js";
export default {
  name: "State",
  data() {
    return {
      dropDownConfig: [
        { label: '待机', method: 'standby' },
        { label: '自动巡航', method: 'automatic' },
        { label: '手动遥控', method: 'telecontrol' },
      ],
      linkbtn: false,
      stateData: [
        { icon: "fa-arrow-circle-up", label: '水上雷达', unit: 'mm', value: "---", api: getAboveWater },
        { icon: "fa-arrow-circle-down", label: '水下雷达', unit: 'mm', value: "---", api: getUnderWater },
        { icon: "fa-rss", label: '姿态角', unit: '', value: "---", api: getAngle },
      ],
      dataTimer: null,
      timeId: {
        //ajax轮询定时器储存
        getAngle: null,
        getAboveWaterTimer: null,
        getUnderWaterTimer: null,
      },
    };
  },
  mounted() { },
  beforeDestroy() {
    // 定时器解除
    clearInterval(this.dataTimer);
  },
  methods: {
    // 连接无人船
    toLinkShip() {
      linkShip()
        .then((res) => {
          this.linkbtn = true; //切换状态表示已经连接，定位按钮和断开按钮生效
          this.$store.dispatch("cruiseManage/toGetControlModel");
          // this.toGetAngle(); // 获取姿态角
          // this.toGetDirection(); // 获取水上水下障碍物距离
          // 获取无人船姿态角，传感器相关信息
          this.toGetStateData();
          console.log("连接无人船：" + res);
          this.$Notify('连接成功');
        })
        .catch((err) => {
          console.log("错误提示: ", err);
          this.$Notify("与无人船的连接失败！", 'error');
        });
    },
    // 断开连接
    toBreakLinkShip() {
      breakLinkShip()
        .then((res) => {
          console.log("断开连接：" + res);
          this.$Notify('已经与无人船断开连接！', 'warning');
          this.linkbtn = false; //表示断开连接，定位按钮和断开按钮无效，连接按钮生效
          clearInterval(this.dataTimer);
          this.stateData.forEach(item => {
            item.value = '---'
          })
          this.$bus.$emit("stopGetPositions");
          this.$store.commit("cruiseManage/clearData");
        })
        .catch((err) => {
          console.log("错误提示: ", err);
          this.$Notify('服务器异常.....', 'error');

        });
    },
    toGetStateData() {
      let that = this;
      let { stateData } = this;
      this.dataTimer = setInterval(() => {
        for (let k = 0; k < stateData.length; k++) {
          stateData[k].api().then((res) => {
            let v = k;
            let value = res?.data ?? '';
            that.stateData[v].value = parseFloat(value)
          });
        }
      }, 1000)
    },
    // 修改无人船状态
    toChangeState(target) {
      if (this.linkbtn) {
        this.$store.dispatch("cruiseManage/toChangeControlModel", target);
      } else {
        this.$Notify('请保持与无人船连接！', 'warning');
      }
    },
    // EMap组件获取gps定位
    toGetPositions() {
      // 这里可以做一下节流处理。
      this.$bus.$emit("getPositions");
    },
  },
  computed: {
    ...mapState("cruiseManage", ["shipState"]),
    // 返回一个代表当前状态的图标
    statusIcon() {
      let mode = this.shipState;
      switch (mode) {
        case "待机中":
          mode = "fa fa-spinner";
          break;
        case "自动巡航":
          mode = "fa fa-sliders";
          break;
        case "手动遥控":
          mode = "fa fa-arrows";
          break;
        default:
          mode = "fa fa-spinner";
          break;
      }
      return mode;
    },
  },
};
</script>

<style scoped lang="less">
.box-card {
  position: relative;

  .statusIcon {
    position: absolute;
    bottom: 0;
    right: -40px;
    font-size: 150px;
    line-height: 150px;
    opacity: 0.1;
  }
}

.openGpsBtn:not(:hover) {
  border: 1px solid var(--green);
  background-color: transparent !important;
}

.openGpsBtn:disabled {
  color: #2d9f90;
  border: 1px solid #2d9f90;

  &:hover {
    color: #2d9f90;
    border: 1px solid #2d9f90;
    background-color: transparent !important;
  }
}
</style>